<html>
<head>
    <title>商品列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
</head>
<body>
<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">

            </div>
            <div id="topheader">
                <h1 id="title">
                    <a href="#">商品管理</a>
                </h1>
            </div>
            <div id="navigation">
            </div>
        </div>
        <div id="content">
            <p id="whereami">
            </p>
            <h1>
                <div style="float:left">欢迎：<span th:text="${userName}"></span></div>
            </h1>
            <h1>
                <div  style="float:right">
                    <button onclick="window.location.href='/cartList'" class="button">查看购物车</button>
                </div>
            </h1>
            <h5>&nbsp;</h5>

            <h5 style="height: 2px;">&nbsp;</h5>
            <form id="batchDeleteForm" method="post" action="/batchDeleteProduct">
                <input type="hidden" name="selectedProductIds" value="" />
                <table class="table">
                    <!-- 表头部分 -->
                    <tr class="table_header">
                        <td>
                            <button type="button" id="batch-delete-btn" class="button">批量删除</button>
                        </td>
                        <td>
                            商品名
                        </td>
                        <td>
                            单价
                        </td>
                        <td>库存</td>
                        <td>
                            商品描述
                        </td>
                        <td>
                            操作
                        </td>
                    </tr>
                    <!-- 循环显示商品数据 -->
                    <tr th:each="product, iterStat : ${productList}" class="row1" th:if="${iterStat.index < pageSize}">
                        <td>
                            <input type="checkbox" name="selectedProducts" class="item-checkbox" th:value="${product.id}"/>
                        </td>
                        <td th:text="${product.name}">商品名</td>
                        <td th:text="${product.price}">单价</td>
                        <td th:text="${product.stock}">库存</td>
                        <td th:text="${product.description}">商品描述</td>
                        <td>
                            <a href="#" th:href="@{/deleteProduct(id=${product.id})}" class="button">删除</a>
                            <a href="#" th:href="@{/updateProduct(id=${product.id})}" class="button">修改</a>
                            <a href="#" th:href="@{/detailProduct(id=${product.id})}" class="button">详情</a>
                            <a href="#" th:href="@{/addCart(id=${product.id})}" class="button">添加购物车</a>
                        </td>
                    </tr>
                </table>
                <div>
                    <p>
                        <!-- 首页、上一页链接 -->
                        <a href="#" th:href="@{/product?pageNum=1}" class="button">首页</a>
                        <a th:if="${pageNum > 1}" th:href="@{/product?pageNum=__${pageNum - 1}__}" class="button">&lt;</a>
                        <!-- 显示前几个页码 -->
                        <span th:each="i : ${#numbers.sequence(1, maxVisiblePages)}">
                <a th:href="@{/product?pageNum=__${i}__&amp;pageSize=__${pageSize}__}"
                   th:class="${pageNum == i}? 'active button' : 'button'"
                   th:text="${i}"></a>
        </span>
                        <!-- 如果总页码大于最大可见页码数 -->
                        <th:block th:if="${pages > maxVisiblePages}">
                            <!-- 若当前页码不在最后几页内，则显示省略号 -->
                            <th:block th:unless="${pageNum > pages - maxVisiblePages}">
                                <span>...</span>
                            </th:block>
                            <!-- 显示最后几个页码 -->
                            <span th:each="i : ${#numbers.sequence(pages - maxVisiblePages + 1, pages)}">
                <a th:href="@{/product?pageNum=__${i}__&amp;pageSize=__${pageSize}__}"
                   th:class="${pageNum == i}? 'active button' : 'button'"
                   th:text="${i}"></a>
            </span>
                        </th:block>
                        <!-- 下一页、尾页链接 -->
                        <!-- 如果不是最后一页 -->
                        <a th:if="${pageNum < pages}"
                           th:href="@{/product?pageNum=__${pageNum + 1}__&amp;pageSize=__${pageSize}__}"
                           class="button">&gt;</a>
                        <a th:href="@{/product?pageNum=__${pages}__}">尾页</a>
                    </p>
                </div>
                <p>
                    <a href="addProduct" class="button">添加商品</a>
                </p>
            </form>
        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">
            www.commodityms.com.cn
        </div>
    </div>
</div>
</body>
<script>
    document.getElementById('batch-delete-btn').addEventListener('click', function() {
        var selectedProductIds = [];
        var checkboxes = document.querySelectorAll('.item-checkbox:checked');

        checkboxes.forEach(function(checkbox) {
            selectedProductIds.push(checkbox.value);
        });
        // 将选中的商品ID以逗号分隔的形式放入隐藏域
        document.getElementsByName('selectedProductIds')[0].value = selectedProductIds.join(',');
        // 提交表单至后端进行批量删除
        document.getElementById('batchDeleteForm').submit();
    });
</script>
</html>
